<template>
	<view>
		<view class="top bgfff">
			<view class="flex_between flex_items ptb20 plr20 box_b bbe9s">

				<picker mode="selector" :range="dateList" @change="bindDateChange">
					<view class="ipt flex_center flex_items">
						<view v-if="appdate" class="f28">{{appdate }}</view>
						<view v-else class="f28 c9">选择日期</view>
						<image class="down2" src="../../images/down2.png"></image>
					</view>
				</picker>

				<picker mode="selector" :range="timeList" @change="bindTimeChange">
					<view class="ip1s flex_center flex_items">
						<view v-if="apptime" class="f28">{{apptime }}</view>
						<view v-else class="f28 c9">选择时间</view>
						<image class="down2" src="../../images/down2.png"></image>
					</view>
				</picker>

				<view @click="daochu" class="dcBtn flex_center flex_items f28 cf">导出数据</view>
			</view>
			<searchItem class="flex1" ref="seacBox" @seaItem="seaItem" :searchList="searchList"
				:selectIndex="selectIndex">
			</searchItem>
			<view class="flex_around flex_items bte9s">
				<view @click="switchNav(0)" class="flex1 pos space100 flex_center flex_items">
					<view class="f28 pos">
						<view :class="navIndex == 0 ? 'bold c3' : 'c6'">全部</view>
						<view class="number f20 c3">{{countDetail.all}}</view>
					</view>
					<image v-if="navIndex == 0" class="hover" src="../../images/hover.png"></image>
				</view>
				<view @click="switchNav(1)" class="flex1 pos space100 flex_center flex_items">
					<view class="f28 pos">
						<view :class="navIndex == 1 ? 'bold c3' : 'c6'">待审核</view>
						<view class="number f20 c3">{{countDetail.s0}}</view>
					</view>
					<image v-if="navIndex == 1" class="hover" src="../../images/hover.png"></image>
				</view>
				<view @click="switchNav(2)" class="flex1 pos space100 flex_center flex_items">
					<view class="f28 pos">
						<view :class="navIndex == 2 ? 'bold c3' : 'c6'">已审核</view>
						<view class="number f20 c3">{{countDetail.s1}}</view>
					</view>
					<image v-if="navIndex == 2" class="hover" src="../../images/hover.png"></image>
				</view>
				<view @click="switchNav(3)" class="flex1 pos space100 flex_center flex_items">
					<view class="f28 pos">
						<view :class="navIndex == 3 ? 'bold c3' : 'c6'">已核销</view>
						<view class="number f20 c3">{{countDetail.s3}}</view>
					</view>
					<image v-if="navIndex == 3" class="hover" src="../../images/hover.png"></image>
				</view>
				<view @click="switchNav(4)" class="flex1 pos space100 flex_center flex_items">
					<view class="f28 pos">
						<view :class="navIndex == 4 ? 'bold c3' : 'c6'">已拒绝</view>
						<view class="number f20 c3">{{countDetail.s2}}</view>
					</view>
					<image v-if="navIndex == 4" class="hover" src="../../images/hover.png"></image>
				</view>
			</view>
		</view>
		<view class="space100 mt10"></view>
		<view class="space120"></view>
		<view class="space120"></view>
		<view v-if="requestStatus">
			<view v-if="list.length > 0 && list[0].length > 0" class="plr20 box_b">
				<block v-for="(data, idx) in list" :key="idx">
					<view v-for="(item, index) in data" :key="idx + '_' + index"
						class="conBox p20 box_b bgfff mt20 pb30">

						<view class="space100 flex_between flex_items bbe9s">
							<view class="f30 c3 bold">报名时间：{{item.addtime}}</view>
							<view v-if="item.statusid == 0" class="f30 c9">待审核</view>
							<view v-if="item.statusid == 1" class="f30 color1">通过审核</view>
							<view v-if="item.statusid == 2" class="f30 color2">未通过审核</view>
							<view v-if="item.statusid == 3" class="f30 c9">已参加活动</view>
						</view>
						<view class="flex_between flex_items f30 pt20 mt15">
							<view>姓名</view>
							<view>{{item.name}}</view>
						</view>
						<view class="flex_between flex_items f30 pt20 mt15">
							<view>手机号</view>
							<view>{{item.phone}}</view>
						</view>
						<view class="flex_between flex_items f30 pt20 mt15">
							<view>身份证号</view>
							<view>{{item.id_card}}</view>
						</view>
						<view class="flex_between flex_items f30 pt20 mt15">
							<view>报名人数</view>
							<view>{{item.peoples}}</view>
						</view>
						<view class="flex_between flex_items f30 pt20 mt15">
							<view>预约日期</view>
							<view>{{item.appdate}}</view>
						</view>
						<view class="flex_between flex_items f30 pt20 mt15">
							<view>预约时间</view>
							<view>{{item.apptime}}</view>
						</view>
						<view class="flex_between f30 pt20 mt15">
							<view class="flex_shrink pr30 box_b">备注</view>
							<view v-if="item.remark">
								<text class="txt_word word_break">{{item.remark}}</text>
							</view>
							<view class="c9" v-else>无</view>
						</view>
						<view v-if="item.statusid != 0">
							<view class="flex_between f30 pt20 mt15">
								<view class="flex_shrink pr30 box_b">审核人员备注</view>
								<view v-if="item.remark1">
									<text class="txt_word word_break">{{item.remark1}}</text>
								</view>
								<view class="c9" v-else>无</view>
							</view>
							<view class="flex_between f30 pt20 mt15">
								<view class="flex_shrink pr30 box_b">审核人员</view>
								<view>{{item.accountName}}</view>
							</view>
						</view>

						<view v-if="item.statusid == 0" class="flex_end flex_items mt30 pt30 bte9s ">
							<view @click="edit(idx, index)" class="btn0 flex_center flex_items f28">编辑</view>
							<view @click="shenhe(idx, index)" class="btn1 flex_center flex_items f28 cf ml20">审核
							</view>

						</view>
						<view v-if="item.statusid == 1" class="flex_end flex_items mt30 pt30 bte9s">
							<view @click="cancel(idx, index)" class="btn2 flex_center flex_items f28">取消报名</view>
							<view @click="edit(idx, index)" class="btn0 flex_center flex_items f28 ml20">编辑</view>
							<view @click="hexiao(idx, index)" class="btn1 flex_center flex_items f28 ml20 cf">核销</view>
						</view>
						<view v-if="item.statusid == 2 || item.statusid == 5"
							class="flex_between flex_items mt30 pt30 bte9s ">
							<view class="f30 color2">原因：{{item.reason}}</view>
							<!-- <view class="flex_end flex_items pl20 box_b flex_shrink">
								<view @click="edit(idx, index)" class="btn0 flex_center flex_items f28 cf">编辑</view>
							</view> -->
						</view>
					</view>
				</block>
			</view>

			<loading :loading="loading" :list="list" :next="next"></loading>
		</view>
		<!-- <view class="space120"></view>
		<view class="footBox bte9s bgfff">
			<view class="flex_center flex_items ptb20">
				<view @click="saoma" class="bbtn flex_center flex_items">
					<image class="sao" src="../../images/sao.png"></image>
					<view class="f32 cf bold">扫码核销</view>
				</view>
			</view>
		</view> -->
		<shenheBox ref="shenhe1Box" @shenhe2Box="shenhe2Box"></shenheBox>
		<cancelBox ref="cancel1Box" @cancel2Box="cancel2Box"></cancelBox>
	</view>
</template>

<script>
	let common = getApp().globalData.commonFun;
	let util = getApp().globalData.utilFun;
	import shenheBox from '@/components/shenheBox/shenheBox.vue';
	import searchItem from '@/components/searchItem/searchItem.vue';
	import cancelBox from '@/components/cancelBox/cancelBox.vue';
	export default {
		components: {
			shenheBox,
			searchItem,
			cancelBox
		},
		name: "enrollList",
		data() {
			return {
				requestStatus: false,
				searchList: [],
				selectIndex: 0,
				appdate: "",
				adddatIndex: 0,
				dateList: ['所有时间',
					"2025-01-29",
					"2025-01-30",
					"2025-01-31",
					"2025-02-01",
					"2025-02-02",
					"2025-02-03",
					"2025-02-04",
					"2025-02-05",
					"2025-02-06",
					"2025-02-07"
				],
				apptime: "",
				appdtIndex: 0,
				timeList: [
					'所有时段',
					'上午 10:30 - 11:50',
					'下午 14:30 - 15:50',
					'下午 16:10 - 17:30'
				],
				countDetail: {
					all: 0,
					s0: 0,
					s1: 0,
					s2: 0,
					s3: 0
				},
				navIndex: 0,
				keys: "",
				list: [],
				loading: false,
				next: 0,
				isLoading: true,
				page: 1,
				limit: 10,
				isRefresh: false
			};
		},
		async onLoad() {
			common.showLoading("加载中...");
			this.navIndex = 0;
			await this.getCount();
			common.init(this);
			this.getList();

			let that = this;
			getApp().globalData.updateEnrollListData = function(res) {
				let li = that.list;
				let idx = -1;
				let index = -1
				li.forEach((rs, ix) => {
					rs.forEach((rw, idex) => {
						if (rw.id == res.id) {
							idx = ix;
							index = idex;
						}
					})
				})
				if (idx > -1) {
					res['statusid'] = li[idx][index].statusid;
					res['reason'] = li[idx][index].reason;
					res['addtime'] = li[idx][index].addtime;
					res['accountName'] = li[idx][index].accountName;
					that.list[idx][index] = res;
					that.list[idx].splice(1, index);
				}
			}
		},
		methods: {
			saoma() {

			},
			bindDateChange(e) {
				console.log(e)
				this.adddatIndex = e.detail.value;
				this.appdate = this.dateList[e.detail.value];
			},
			bindTimeChange(e) {
				console.log(e)
				this.appdtIndex = e.detail.value;
				this.apptime = this.timeList[e.detail.value];
			},
			async hexiao(idx, index) {
				let rs = await common.showClickModal("是否确认核销报名？");
				if (!rs.confirm) return;
				let val = {
					id: this.list[idx][index].id,
					statusid: 3
				}
				let url = 'arts/edit';
				let res = await util.httpRequest(url, val, "POST");
				common.hideLoading();
				if (res.result == "fail") {
					common.showTimeToast(res.msg);
					return;
				}
				common.showTimeToast("核销成功");
				if (this.navIndex == 0) {
					this.list[idx][index].statusid = 3;
				} else {
					let li = this.list;
					li[idx].splice(index, 1);
					this.list = li;
				}
				await this.getCount();
			},
			daochu() {
				let dt = this.appdate;
				if (this.adddatIndex == 0) {
					dt = "";
				}
				let ddt = this.apptime;
				if (this.appdtIndex == 0) {
					ddt = "";
				}
				let url = 'arts/down?appdate=' + dt + "&apptime=" + ddt + '&Auth=Bearer ' + uni.getStorageSync('token')
				common.downFile(url);
			},
			//编辑
			edit(idx, index) {
				let det = this.list[idx][index];
				if (getApp().globalData.updateIndexData) {
					getApp().globalData.updateIndexData({
						phone: det.phone
					})
				}
				uni.navigateTo({
					url: "/pages/index/index?phone=" + det.phone
				})
			},
			shenhe(idx, index) {
				this.idx = idx;
				this.index = index;
				this.$refs.shenhe1Box.show(this.list[idx][index])
			},
			async shenhe2Box(res) {
				console.log(res)
				let li = this.list;
				li[this.idx][this.index].statusid = res.statusid;
				li[this.idx][this.index].remark1 = res.remark1;
				if (res.reason) {
					li[this.idx][this.index].reason = res.reason;
				}
				this.list = li;
				await this.getCount();
			},
			//取消报名
			async cancel(idx, index) {
				let rs = await common.showClickModal("是否确认取消报名？");
				if (!rs.confirm) return;
				this.idx = idx;
				this.index = index;
				this.$refs.cancel1Box.show(this.list[idx][index])
			},
			async cancel2Box(res) {
				console.log(res)
				let li = this.list;
				li[this.idx].splice(this.index, 1);
				this.list = li;
				await this.getCount();
			},
			switchNav(index) {
				if (this.navIndex == index) return;
				common.showLoading("加载中...");
				this.navIndex = index;
				common.init(this);
				this.getList();
			},
			async getCount() {
				let url = 'arts/total';
				let dt = this.appdate;
				if (this.adddatIndex == 0) {
					dt = "";
				}
				let ddt = this.apptime;
				if (this.appdtIndex == 0) {
					ddt = "";
				}
				let val = {
					appdate: dt,
					apptime: ddt,
					keywords: this.keys,
				};
				let res = await util.httpRequest(url, val);
				if (res.result == "success") {
					this.countDetail = res.results;
				}
			},
			//搜索回调
			seaItem(res) {
				//查询
				if (res.detail.type == 'search') {
					this.keys = res.detail.keys;
					common.showLoading('加载中...');
					common.init(this);
					this.getCount();
					this.getList();
				}
			},
			// 获取列表
			async getList() {
				let dt = this.appdate;
				if (this.adddatIndex == 0) {
					dt = "";
				}
				let ddt = this.apptime;
				if (this.appdtIndex == 0) {
					ddt = "";
				}
				let val = {
					keywords: this.keys,
					appdate: dt,
					apptime: ddt
				};
				if (this.navIndex == 1) {
					val['statusid'] = 0;
				}
				if (this.navIndex == 2) {
					val['statusid'] = 1;
				}
				if (this.navIndex == 3) {
					val['statusid'] = 3;
				}
				if (this.navIndex == 4) {
					val['statusid'] = 2;
				}
				let url = "arts/page";
				let res = await common.getList(url, val, this, true);
				if (res.code == 401) {
					common.setStorage('openurl', '/pages/enrollList/enrollList')
					uni.redirectTo({
						url: "/pages/adminLogin/adminLogin"
					});
					common.showTimeToast(res.msg);
					return;
				}
			}
		},
		async onPullDownRefresh() {
			//初始化参数
			await common.refresh(this, false);

			this.getList();
		},
		//事件处理
		async onReachBottom() {
			//参数值更改
			await common.loadMore(this);

			this.getList();
		}
	};
</script>

<!-- #ifdef MP -->
<style>
	page {
		background: #f2f2f8;
	}
</style>
<!-- #endif -->
<style scoped>
	Page {
		background: #f2f2f8;
	}

	.top {
		position: fixed;
		top: 0;
		width: 100%;
		left: 0;
	}

	.dcBtn {
		width: 160rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background: #15a183;
	}

	.number {
		position: absolute;
		top: -18rpx;
		right: -15rpx;
	}

	.hover {
		width: 37rpx;
		height: 8rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.ipt {
		width: 205rpx;
		height: 80rpx;
		border: 1px solid #eeeeee;
		border-radius: 10rpx;
	}

	.ip1s {
		width: 290rpx;
		height: 80rpx;
		border: 1px solid #eeeeee;
		border-radius: 10rpx;
	}

	.down2 {
		width: 20rpx;
		height: 10rpx;
		margin-left: 10rpx;
	}

	.color1 {
		color: #15a183;
	}

	.color2 {
		color: #ff4141;
	}

	.btn0 {
		width: 140rpx;
		height: 60rpx;
		border-radius: 30rpx;
		border: 1px solid #eeeeee
	}

	.btn1 {
		width: 140rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background: #15a183;
		border: 1px solid #15a183
	}

	.btn2 {
		width: 160rpx;
		height: 60rpx;
		border-radius: 30rpx;
		border: 1px solid #eeeeee
	}

	.sao {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.bbtn {
		width: 690rpx;
		height: 90rpx;
		background: #15a183;
		border-radius: 45rpx;
	}
</style>